<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的jquery进度条插件</title>
<link rel="stylesheet" href="css/jquery.lineProgressbar.css">
<style>
	
	.jq22-content{ width: 70%; margin-left: auto; margin-right: auto; }
</style>
</head>
<body>

<div class="jq22-content">
  <h3 class="center">基本进度条</h3>
  <div id="progressbar1"></div>
  <h3 class="center">控制进度条的颜色</h3>
  <div id="progressbar2"></div>
  <h3 class="center">控制进度条的高度</h3>
  <div id="progressbar3"></div>
  <h3 class="center">控制进度条的圆角</h3>
  <div id="progressbar4"></div>
</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script src="js/jquery.lineProgressbar.js"></script> 
<script type="text/javascript">
		$(function(){
			$('#progressbar1').LineProgressbar({
				percentage: 50,height: '3px',radius: '3px'
			});
			$('#progressbar2').LineProgressbar({
				percentage: 25,
				fillBackgroundColor: '#1abc9c'
			});
			$('#progressbar3').LineProgressbar({
			  percentage: 91,
			  fillBackgroundColor: '#e67e22',
			  height: '35px'
			});
			$('#progressbar4').LineProgressbar({
			  percentage: 98,
			  fillBackgroundColor: '#f1c40f',
			  height: '65px',
			  radius: '50px'
			});
		})
	</script>
</body>
</html>